<template>
    <div class="cropupload">
        <image-upload field="img"
                      @crop-success="cropSuccess"
                      @crop-upload-success="cropUploadSuccess"
                      @crop-upload-fail="cropUploadFail"
                      v-model="show"
                      :width="width"
                      :height="height"
                      :url="url"
                      :params="params"
                      :headers="headers"
                      img-format="png">
        </image-upload>
        <el-button @click="toggleShow" :disabled="buttonDisable">点击上传</el-button>
        <ul v-if="fileList.length > 0" class="el-upload-list el-upload-list--picture">
            <li v-for="(file,index) in fileList" :key="index" tabindex="0" class="el-upload-list__item is-success">
                <img
                    :src="file.url"
                    alt="" class="el-upload-list__item-thumbnail">
                <a class="el-upload-list__item-name" >
                    <i class="el-icon-document" ></i>{{file.name}}
                </a>
                <label class="el-upload-list__item-status-label" >
                    <i class="el-icon-upload-success el-icon-check"></i>
                </label>
                <i class="el-icon-close" @click="removefile(index)"></i>
                <i class="el-icon-close-tip" >按 delete 键可删除</i>
            </li>
        </ul>
    </div>
</template>

<script>
import ImageUpload from 'vue-image-crop-upload';
import http from '../../libs/http'
export default {
    name: "CropUpload",
    components:{
        ImageUpload
    },
    computed:{
        buttonDisable(){
            return this.fileList.length >= this.maxFile
        }
    },
    data(){
        return {
            show:false
        }
    },
    props:{
        params:{
            type:Object,
            default(){
                return {}
            }
        },
        headers:{
            type:Object,
            default(){
                return {
                    smail: '*_~'
                }
            }
        },
        url:{
            type:String,
            default(){
                return '/upload/upload'
            }
        },
        fileList:{
            type:Array,
            default(){
                return []
            }
        },
        width:{
            type:Number,
            default(){
                return 400
            }
        },
        height:{
            type:Number,
            default(){
                return 400
            }
        },
        maxFile:{
            type:Number,
            default(){
                return 9
            }
        },
        isDeleteRemoteFile:{
            type:Boolean,
            default(){
                return true
            }
        },
        deleteRemoteRrl:{
            type:String,
            default(){
                return '/upload/deletefile'
            }
        }
    },
    methods:{
        //drop
        toggleShow() {
            this.show = !this.show;
        },
        /**
         * crop success
         *
         * [param] imgDataUrl
         * [param] field
         */
        cropSuccess(imgDataUrl, field){
            console.log('-------- crop success --------');
        },
        /**
         * upload success
         *
         * [param] jsonData  server api return data, already json encode
         * [param] field
         */
        cropUploadSuccess(jsonData, field){
            this.fileList.push(jsonData)
            if(this.buttonDisable){
                this.toggleShow()
            }
            this.$emit('crop-upload-success',jsonData,this.fileList)
        },
        removefile(index) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         let data = this.fileList[index]
            this.fileList.splice(index,1)
            if(this.isDeleteRemoteFile){
                http.post(this.deleteRemoteRrl,{
                    url:data.url,
                    name:data.name
                })
            }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },
        /**
         * upload fail
         *
         * [param] status    server api return error status, like 500
         * [param] field
         */
        cropUploadFail(status, field){
            console.log('-------- upload fail --------');
            console.log(status);
            console.log('field: ' + field);
        }
    }
}
</script>

<style scoped>
.cropupload{
    max-width: 360px;
}
</style>
